<template>
  <div class='page-container'>
    <div class="btn" @click="beginWrite">开始打字</div>
    <div class="box">
      <div class="text-wrap">
        <p v-for="(item, index) in text" :key="index" :class="{'writing': index == writingIndex}">{{item}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TypeAni',
  components: {},
  computed: {
  },
  data() {
    return {
      writingIndex: 0,
      str: ['认真生活自有不同！', '感谢你，', '这一路努力发光', '为他人的向往导航', '','数字串起年度时刻，', '一起迎接新世界吧！'],
      text: [],
      writing: false,
      lighting: false,
      timer: null
    }
  },
  created() {
  },
  mounted() {

  },
  beforeDestroy() {
  },
  methods: {
    beginWrite() {
      this.text = ['', '', '', '', '', '', '']
      let i = 0
      let j = 0
      this.timer = setInterval(() => {
        this.writingIndex = j
        this.text[j] += this.str[j][i] || ''
        this.$set(this.text, j, this.text[j])
        i++
        if(i>=this.str[j].length) {
          i=0
          j++
          if(j>=this.str.length) {
            clearInterval(this.timer)
          }
        }

      }, 400)
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
  min-height: 100vh;
  position: relative;

  .box {
    width: 500px;
    height: 500px;
    background: cadetblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .text-wrap {
      min-height: 30px;
      font-size: 24px;
      line-height: 30px;
      position: relative;
      p {
        height: 30px;
        &.writing:after {
          content: '';
          display: inline-block;
          width: 1px;
          height: 30px;
          background-color: #000;
          animation: writing 0.8s step-start infinite;
        }
      };
    }

    @keyframes writing {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      75% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

  }
}
</style>
